<template>
  <div class="stationInfo-page">
    <div class="station_info">
      <div class="left_info">
        <table class="tableInfo">
          <tbody>
            <tr>
              <td class="fieldName">测站名称</td>
              <td>{{ state.infoData !== null ? state.infoData.stnm : "" }}</td>
              <td class="fieldName">测站编码</td>
              <td>{{ state.infoData !== null ? state.infoData.stcd : "" }}</td>
            </tr>
            <tr>
              <td class="fieldName">汛限水位(米)</td>
              <td>{{ state.infoData !== null ? state.infoData.xxLevel : "" }}</td>
              <td class="fieldName">设计水位(米)</td>
              <td>{{ state.infoData !== null ? state.infoData.controlWaterLevel : "" }}</td>
            </tr>
            <tr>
              <td class="fieldName">设计总库容(万立方米)</td>
              <td>{{ state.infoData !== null ? state.infoData.capacity : "" }}</td>
              <td class="fieldName">坝顶高程(米)</td>
              <td>{{ state.infoData !== null ? state.infoData.dam : "" }}</td>
            </tr>
            <tr>
              <td class="fieldName">下游防护对象</td>
              <td>{{ state.infoData !== null ? state.infoData.protectedTarget : "" }}</td>
              <td class="fieldName">所在河流</td>
              <td>{{ state.infoData !== null ? state.infoData.river : "" }}</td>
            </tr>
            <tr>
              <td class="fieldName">所在河流</td>
              <td>{{ state.infoData !== null ? state.infoData.river : "" }}</td>
              <td class="fieldName">坝型</td>
              <td>{{ state.infoData !== null ? state.infoData.type : "" }}</td>
            </tr>

            <tr>
              <td class="fieldName">管理责任人</td>
              <td>{{ state.infoData !== null ? state.infoData.userGl : "" }}</td>
              <td class="fieldName">技术责任人</td>
              <td>{{ state.infoData !== null ? state.infoData.userJs : "" }}</td>
            </tr>
            <tr>
              <td class="fieldName">经度</td>
              <td>{{ state.infoData !== null ? state.infoData.lgtd : "" }}</td>
              <td class="fieldName">纬度</td>
              <td>{{ state.infoData !== null ? state.infoData.lttd : "" }}</td>
            </tr>
            <tr>
              <td class="fieldName">管理单位</td>
              <td colspan="3">{{ state.infoData !== null ? state.infoData.unit : "" }}</td>
            </tr>
            <tr>
              <td class="fieldName">测站地址：</td>
              <td colspan="3">{{ state.infoData !== null ? state.infoData.address : "" }}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="right_map">
        <GlobalOlMap />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, watch, onMounted } from "vue";
  import { getOneStationData } from '@/api/information/reservoir';
  import { GlobalOlMap } from "@/components/GlobalOlMap";
  import { addMapData } from "./addMapData";
  import noImage from "@/assets/svg/no-image.svg";
  import { LeftCircleFilled, RightCircleFilled } from '@ant-design/icons-vue';

  defineOptions({ name: "StationInfo" });
  const urlhttp = window.localStorage.getItem("GET_IMG_HTTP");
  const state = reactive({
    tabActive: "1",
    infoData: null,
    chartOption: null,
  });

  const props = defineProps({
    data: { type: Object },
  });

  watch(
    () => props.data,
    async () => {
      await getStationDataInfo();
    }
  );

  const getStationDataInfo = async () => {
    if (props.data) {
      const infoData = await getOneStationData(props.data.id);
      addMapData(infoData);
      state.infoData = infoData;
    }
  };

  onMounted(async () => {
    await getStationDataInfo();
  });
</script>

<style lang="less" rel="stylesheet/less" scoped>
.stationInfo-page {
  width: 100%;
  height: 100%;
  min-height: 500px;
  .station_info {
    height: 100%;
    display: flex;
    justify-content: space-between;
    .left_info {
      width: 50%;
      .tableInfo {
        width: 100%;
        tr td {
          border: 1px solid #eee;
          padding: 8px 12px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        tr td:nth-child(1),
        tr td:nth-child(3) {
          width: 15%;
          // min-width: 120px;
          background: #fafafa;
          color: #333;
        }
        tr td:nth-child(2),
        tr td:nth-child(4) {
          width: 35%;
          // min-width: 200px;
          color: #111;
        }
      }
    }
    .right_map {
      width: 49%;
      height: 100%;
      .noImage {
        width: 100%;
        height: 100%;
        background: #f5f5f5;
        display: flex;
        align-items: center;
        flex-direction: column;
        img {
          width: 80%;
          height: 80%;
        }
        p {
          color: #666;
          margin-top: -20px;
        }
      }
    }
  }
  .content {
    width: 100%;
    height: 80%;
  }
}
.ant-carousel {
  width: 100%;
  height: 100%;
  :deep(.slick-slider) {
    text-align: center;
    height: 100%;
    overflow: hidden;
    .slick-list {
      height: 100%;
      .slick-track {
        height: 100%;
        .slick-slide {
          height: 100%;
          & > div {
            height: 100%;
            & > div {
              height: 100%;
            }
          }
        }
      }
    }
  }
  .carouselArrow {
    width: 25px;
    height: 25px;
    font-size: 25px;
    color: #fff;
    background-color: rgba(31, 45, 61, 0.11);
    opacity: 0.3;
    z-index: 1;
  }
  .slick-prev::before, .slick-next::before {
    content: '';
  }
  .custom-slick-arrow:befor {
    display: none;
  }
  .carouselArrow:hover {
    opacity: 0.6;
  }
}
</style>
